[Flyout] use container as reference for pushMinBreakpoint by tsullivan · Pull Request #9592 · elastic/eui

tsullivan · 2026-04-14T02:00:55Z

Summary

Bug fix for EuiFlyout pushMinBreakpoint when container prop is provided.

Fix: "push" type EuiFlyout has pushMinBreakpoint logic. This changes the type to overlay when the viewport size is below a given breakpoint. Typically, that breakpoint is measured against the browser viewport. When the container prop is passed to EuiFlyout, the breakpoint should be measured against the dimensions of the given container.

API Changes

component / parent	prop / child	change	description
EuiFlyout	pushMinBreakpoint	Updated	When `container` is set, the push/overlay breakpoint decision is now based on the container's width instead of the viewport width

Screenshots

Setup:

resizable: false
ownFocus: true
type: push
pushMinBreakpoint: m

Before

After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

~~[ ] 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?~~
💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
~~[ ] 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).~~
~~[ ] 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.~~

Impact level: 🟢 None / 🟢 Low / 🟡 Moderate / 🔴 High

Impact explained: When a flyout has both type="push" and a container, the point at which it flips between push and overlay mode changes. Previously it was based on viewport width; now it's based on container width. Since containers are typically narrower than the viewport, the flyout will switch to overlay sooner (at wider viewport sizes) than before.

Release Readiness

~~[ ] Documentation: {link to docs page(s)}~~
~~[ ] Figma: {link to Figma or issue}~~
~~[ ] Migration guide: {steps or link, for breaking/visual changes or deprecations}~~
~~[ ] Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}~~

QA instructions for reviewer

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, Cypress, and VRT
Changelog: Added changelog entry
Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

…r's width

Copilot

Pull request overview

Fixes EuiFlyout’s pushMinBreakpoint behavior so that when a container is provided, the decision to render in “push” vs “overlay” mode is based on the container width (not the viewport), aligning responsive behavior with the available in-container space.

Changes:

Updated useIsPushed to optionally compute breakpoint logic against a provided container element’s width (via ResizeObserver + theme breakpoints).
Wired containerElement into useIsPushed from both unmanaged (EuiFlyoutComponent) and managed (EuiFlyoutMain) flyout entry points.
Added an upcoming changelog entry documenting the bug fix.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/eui/src/components/flyout/manager/flyout_main.tsx	Uses manager container state as the reference for `pushMinBreakpoint` decisions in the managed main flyout wrapper.
packages/eui/src/components/flyout/hooks.ts	Extends `useIsPushed` to support container-width-based breakpoint evaluation and react to container resizes.
packages/eui/src/components/flyout/flyout.component.tsx	Passes the resolved flyout `container` element into `useIsPushed` so push/overlay behavior matches container sizing.
packages/eui/changelogs/upcoming/9592.md	Documents the `pushMinBreakpoint` container-scoped bug fix.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…h already computed by useApplyFlyoutLayoutMode

acstll

Thanks for opening this @tsullivan! I left a couple of comments, nothing blocking.

I also have another suggestion: do you think it'd make sense to define the container prop in the flyout_manager.stories.tsx? I added it locally (here) for testing like in the snippet below (maybe there's a more correct way i'm missing):

container={() => document.querySelector('#app-main-scroll')}

tsullivan · 2026-04-21T18:14:08Z

I also have another suggestion: do you think it'd make sense to define the container prop in the flyout_manager.stories.tsx?

Thanks for this suggestion, @acstll! There actually is a "Container demo" storybook in src/components/flyout/manager/flyout_containers.stories.tsx, but I consider the storybooks in the flyout/manager directory to be a bit overkill. I think we can tackle the overkill, and give more highlight to the features that make the Flyout System great.

There is a src/components/flyout/manager/flyout_containers.stories.tsx ("Container Demo") that highlights the container API of flyouts.
There are two other "advanced" stories, both in src/components/flyout/manager/flyout_sessions.stories.tsx
- "Multi-session example": demonstrates history management features
- "Multi-root sync": demonstrates synchronized state across multiple React mount points.
The src/components/flyout/manager/flyout_manager.stories.tsx ("Playground") storybook is a simple demonstration of child flyouts and allows toggling different props.

I think we can eventually get rid of the storybooks from (2) and maybe (3):

"Multi-session example": the history management features should be refactored out of EUI and moved to Kibana. There's an issue in the private kibana-team repo tracking this.
"Multi-root sync": this proves that a requirement is working - it should be replaced with unit tests.
"Playground": the "Container Demo" also shows off child flyouts. If the "Container Demo" storybook also does an adequate job of allowing toggling the different props, the current "Playground" storybook would be redundant and could be removed.

…com:tsullivan/eui into flyout/container-prop-and-pushMinBreakpoint

elasticmachine · 2026-04-21T19:00:29Z

💚 Build Succeeded

History

💚 Build #3251 succeeded 3b25637
💚 Build #3233 succeeded 70df052
💚 Build #3217 succeeded 281ee82

elasticmachine · 2026-04-21T19:19:08Z

💚 Build Succeeded

Buildkite Build
Commit: 7227438

History

💚 Build #6273 succeeded 3b25637
💚 Build #6256 succeeded 70df052
💚 Build #6242 succeeded 281ee82

acstll

🟢 Thanks for addressing the feedback and for contributing the fix!

acstll · 2026-04-22T11:03:19Z

I think we can eventually get rid of the storybooks from (2) and maybe (3):

thanks for the detailed explanation @tsullivan — i don't have a strong opinion, but i do agree removing them for the reasons you're outlining seems like the right move 👍

the "container demo" was useful for me in this case, it allowed me to test the changes locally without using Kibana 😅

## Dependency updates - `@elastic/eui` - v114.2.0 ⏩ v114.3.0 --- ## Package updates ## [`v114.3.0`](https://github.com/elastic/eui/releases/v114.3.0) - Updated `productDashboard` icon. ([#9607](elastic/eui#9607)) - Updated `EuiStepsHorizontal` to prevent steps being clickable when `status="disabled"` ([#9574](elastic/eui#9574)) **Bug fixes** - Fixed broken SVG for `chartPie` icon. ([#9607](elastic/eui#9607)) - Fixed a bug in `EuiDataGrid` that caused the scroll position to reset when using middle mouse button to scroll the container. ([#9613](elastic/eui#9613)) - Fixed `EuiFlyout` to compare `pushMinBreakpoint` against the container's width, instead of the viewport width, when the `container` prop is provided. This ensures app-scoped flyouts switch between push and overlay modes based on the space actually available inside their container. ([#9592](elastic/eui#9592)) **Accessibility** - Fixed duplicate screen reader output for `EuiStepsHorizontal` ([#9574](elastic/eui#9574))

tsullivan added 4 commits April 13, 2026 14:41

initial pass on making push-vs-overlay decision based on the containe…

c29278d

…r's width

fix lint

8a225a4

Merge branch 'main' into flyout/container-prop-and-pushMinBreakpoint

1662d6d

add changelog

281ee82

tsullivan marked this pull request as ready for review April 14, 2026 02:17

tsullivan requested a review from a team as a code owner April 14, 2026 02:17

Copilot AI review requested due to automatic review settings April 14, 2026 02:17

Copilot started reviewing on behalf of tsullivan April 14, 2026 02:17 View session

tsullivan mentioned this pull request Apr 14, 2026

EuiFlyout: push vs overlay breakpoint should respect container width when set elastic/kibana#258828

Open

Copilot AI reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/eui/src/components/flyout/hooks.ts Outdated

Comment thread packages/eui/src/components/flyout/flyout.component.tsx Outdated

Comment thread packages/eui/src/components/flyout/manager/flyout_main.tsx

Comment thread packages/eui/src/components/flyout/hooks.ts

tsullivan and others added 6 commits April 15, 2026 15:01

fix the duplicate ResizeObserver

5ad0270

use state.referenceWidth from the manager - the single source of trut…

d253c1a

…h already computed by useApplyFlyoutLayoutMode

fix comment over-verbosity

d1cd087

flyout component hooks test

b0f36af

fix lint

70df052

Merge branch 'main' into flyout/container-prop-and-pushMinBreakpoint

3b25637

acstll self-requested a review April 21, 2026 07:23

acstll reviewed Apr 21, 2026

View reviewed changes

Comment thread packages/eui/src/components/flyout/hooks.ts

Comment thread packages/eui/changelogs/upcoming/9592.md Outdated

Merge branch 'main' into flyout/container-prop-and-pushMinBreakpoint

63f4636

tsullivan added 3 commits April 21, 2026 11:18

Merge branch 'flyout/container-prop-and-pushMinBreakpoint' of github.…

aa3ce4c

…com:tsullivan/eui into flyout/container-prop-and-pushMinBreakpoint

add guard against theme lacking requested breakpoint key

d1ab8d3

update changelog with more descriptive wording

7227438

acstll approved these changes Apr 22, 2026

View reviewed changes

tsullivan merged commit 6361771 into elastic:main Apr 23, 2026
5 checks passed

acstll mentioned this pull request Apr 28, 2026

Upgrade EUI to v114.3.0 elastic/kibana#265957

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Flyout] use container as reference for pushMinBreakpoint#9592

[Flyout] use container as reference for pushMinBreakpoint#9592
tsullivan merged 14 commits intoelastic:mainfrom
tsullivan:flyout/container-prop-and-pushMinBreakpoint

tsullivan commented Apr 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

tsullivan commented Apr 21, 2026

Uh oh!

elasticmachine commented Apr 21, 2026

Uh oh!

elasticmachine commented Apr 21, 2026

Uh oh!

acstll left a comment

Uh oh!

acstll commented Apr 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tsullivan commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tsullivan commented Apr 21, 2026

Uh oh!

elasticmachine commented Apr 21, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Apr 21, 2026

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Apr 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tsullivan commented Apr 14, 2026 •

edited

Loading